<script setup>
import { merge, pick } from 'lodash-es';
import { useRequest, useWatch, useResetForm } from '@/hooks';
import { useSelectIns } from '@/store/zdwh.js';
import { addDeviceSys, editDeviceSys } from '@/api/index.js';
import { Message, MessageBox } from 'element-ui';
const props = defineProps({
  dsTitle: { type: String, default: '' },
  editData: { type: Object, default: null },
});
const emit = defineEmits(['success']);

const selectInsStore = useSelectIns();
const visible = ref(false);
const dsForm = ref(null);

const formData = ref({
  enterpriseCode: null,
  superDsCode: '0',
  dsViewId: null,
  dsName: null,
  sortNum: null,
});
const rules = ref({
  dsViewId: { required: true, message: '请输入设备系统ID', trigger: 'blur' },
  dsName: { required: true, message: '请输入设备系统名称', trigger: 'blur' },
  sortNum: [{ required: true, message: '请输入同级排序号', trigger: ['blur', 'change'] }],
});
const superiorName = ref('-');

const submitForm = () => {
  dsForm.value.validate(valid => {
    if (!valid) return false;
    if (props.dsTitle === '新增') {
      MessageBox.confirm('请确认信息无误', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning',
      }).then(() => {
        runAdd(formData.value);
      });
    }
    if (props.dsTitle === '编辑') {
      runEdit(formData.value);
    }
  });
};
const cancel = () => {
  useResetForm(dsForm);
  superiorName.value = '-';
  visible.value = false;
};

const [, , runAdd] = useRequest(addDeviceSys, {
  manual: true,
  onSuccess: res => {
    if (res.code === 200) {
      Message.success(res.msg);
      cancel();
      emit('success', true);
    }
  },
});
const [, , runEdit] = useRequest(editDeviceSys, {
  manual: true,
  onSuccess: res => {
    if (res.code === 200) {
      Message.success(res.msg);
      cancel();
      emit('success', true);
    }
  },
});

useWatch(
  () => selectInsStore.selectIns,
  n => {
    if (n?.enterpriseCode) {
      formData.value.enterpriseCode = n.enterpriseCode;
    }
  },
  { deep: true, immediate: true },
);
useWatch(
  () => props.editData,
  n => {
    if (n) {
      nextTick(() => {
        formData.value = merge({}, formData.value, pick(n, ['superDsCode', 'dsCode', 'dsViewId', 'dsName', 'sortNum']));
      });
    }
  },
);
defineExpose({ visible, superiorName, formData });
</script>

<template>
  <el-dialog :visible.sync="visible" :before-close="cancel" width="40%" append-to-body>
    <div slot="title" class="dialog-title">
      <span class="tit">
        {{ dsTitle }} -
        <span class="u-prim-text">设备系统</span>
      </span>
    </div>
    <el-form ref="dsForm" :model="formData" :rules="rules" size="small" label-width="150px" class="u-pl20 u-pr20">
      <el-form-item label="上级设备系统名称：">
        <el-input v-model.trim="superiorName" size="small" disabled />
      </el-form-item>
      <el-form-item label="设备系统ID：" prop="dsViewId">
        <el-input
          v-filter-input
          v-model.trim="formData.dsViewId"
          placeholder="请输入设备系统ID"
          size="small"
          clearable
        />
      </el-form-item>
      <el-form-item label="设备系统名称：" prop="dsName">
        <el-input
          v-filter-input
          v-model.trim="formData.dsName"
          placeholder="请输入设备系统名称"
          size="small"
          clearable
        />
      </el-form-item>
      <el-form-item label="同级排序号：" prop="sortNum">
        <el-input-number v-model="formData.sortNum" size="small" :min="0" :precision="0" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" plain @click="cancel">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm">保 存</el-button>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
